<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国大学MOOC(慕课)_国家精品课程在线学习平台</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css"/>
	<!-- <link rel="stylesheet/less" href="./css/index.less"> -->
	<link rel="stylesheet" href="./css/index.css">
	<!-- <script src="js/less.min.js" type="text/javascript" charset="utf-8"></script> -->
	<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="app" class="bgc-f3">
        <div class="container width100">
            <div class="row row1 bgc-f">
                <div class="col11 width1200 m0a dis-f">
					<div class="li-hide">
						<img src="./img/mooc_title.png" alt="">
					</div>
					<div>
						<ul>
							<li id="li-lession" class="text-center">课程
								<span class="glyphicon glyphicon-chevron-down pos-re"></span>
							</li>
							<li class="li-hide text-center">学校</li>
							<li class="li-hide text-center">学校云</li>
							<li class="li-hide text-center">下载APP</li>
						</ul>
					</div>
					<div></div>
					<div class="pos-re">
						<input type="text" placeholder="搜索感兴趣的课程" class="pos-ab h36lh"/>
						<span class="glyphicon glyphicon-search pos-ab text-center insipid h36lh"></span>
					</div>
					<div class="dis-f">
						<a href=""></a>
						<a href="javascript:void(0)" id="openWindowA">登陆 | 注册</a>
					</div>
				</div>
            </div>
        </div>
		<div class="container width1200 dis-f">
			<div class="left">
				<ul>
					<li><span class="glyphicon glyphicon-certificate"></span>国家精品</li>
					<li><span class="glyphicon glyphicon-blackboard"></span>计算机</li>
					<li><span class="glyphicon glyphicon-education"></span>21考研</li>
					<li><span class="glyphicon glyphicon-education"></span>22考研</li>
					<li><span class="glyphicon glyphicon-list"></span>理工补习</li>
					<li><span class="glyphicon glyphicon-text-background"></span>实用英语</li>
					<li><span class="glyphicon glyphicon-jpy"></span>考证就业</li>
					<li><span class="glyphicon glyphicon-option-horizontal"></span>更多</li>
				</ul>
			</div>
			<div class="center pos-re">
				<ul class="w100h100 pos-ab">
					<li class="w100h100 pos-ab dis-b" id="swipeli1"><img src="./img/swipe01.jpg" class="w100h100"></li>
					<li class="w100h100 pos-ab dis-n" id="swipeli2"><img src="./img/swipe02.png" class="w100h100"></li>
					<li class="w100h100 pos-ab dis-n" id="swipeli3"><img src="./img/swipe03.jpg" class="w100h100"></li>
				</ul>
				<div class="swipeItem pos-ab">
					<span class="spanActive"></span>
					<span></span>
					<span></span>
				</div>
			</div>
			<div class="right pos-re bgc-f">
				<p class="top text-center">免费学习名校名师的<br>精品课程</p>
				<img src="./img/mouse.png">
				<button type="button" class="btn btn-success width100" id="openWindowB">登录</button>
				<p class="bot pos-ab">网易和高等教育出版社出品</p>
			</div>
		</div>
		<div class="container width1200 bgc-f">
			<div class="item">
				全国691所合作高校
			</div>
			<div class="item">
				<img src="./img/beijing.png">
			</div>
			<div class="item">
				<img src="./img/zhejiang.png">
			</div>
			<div class="item">
				<img src="./img/nanjing.png">
			</div>
			<div class="item">
				<img src="./img/wuhan.png">
			</div>
			<div class="item">
				<img src="./img/haerbin.png">
			</div>
		</div>
		<div class="container width1200">
			<p class="title">推荐课程</p>
			<div class="row4 width100 dis-f">
				<div class="bgc-f pos-re">
					<img src="./img/book_1.png">
					<p class="time insipid">
						<span class="glyphicon glyphicon-time"></span>
						直播6-27 20:00开始</p>
					<p class="bigtitle insipid">四六级备考提分大作战</p>
					<p class="person">陈正康老师</p>
					<p class="content">陈正康老师一节课带你领跑四六级</p>
				</div>
				<div class="bgc-f pos-re">
					<img src="./img/book_1.png">
					<p class="time insipid">
						<span class="glyphicon glyphicon-time"></span>
						直播6-25 18:00开始</p>
					<p class="bigtitle insipid">【公考笔试】逻辑填空的成语钥匙</p>
					<p class="person">公考-徐翔老师</p>
					<p class="content">言语理解整体备考思路,逻辑填空解题原则,高频成语辨析与应用 </p>
				</div>
				<div class="bgc-f pos-re">
					<img src="./img/book_1.png">
					<p class="time insipid">
						<span class="glyphicon glyphicon-time"></span>
						直播6-28 23:00开始</p>
					<p class="bigtitle insipid">【教师资格】成为老师，从这里开始！</p>
					<p class="person">领军教资-任凯</p>
					<p class="content">教师职业好不好?教师资格证有什么用?教师资格证怎么考?</p>
				</div>
				<div class="bgc-f pos-re">
					<img src="./img/book_1.png">
					<p class="time insipid">
						<span class="glyphicon glyphicon-time"></span>
						直播6-27 20:00开始</p>
					<p class="bigtitle insipid">五月时政总结（含两会热点）</p>
					<p class="person">孔昱力</p>
					<p class="content">【考研政治】五月时政总结，两会时政热点</p>
				</div>
				<div class="bgc-f pos-re">
					<img src="./img/book_1.png">
					<p class="time insipid">
						<span class="glyphicon glyphicon-time"></span>
						直播6-29 22:00开始</p>
					<p class="bigtitle insipid">园林丘壑——明代文人的绘画与生活</p>
					<p class="person">中央美术学院——赵力</p>
					<p class="content">为什么明代的文人画作主题多是园林呢？</p>
				</div>
			</div>
		</div>
		<div class="container width1200 dis-f">
			<div>
				<img src="./img/card01.png" class="w100h100">
			</div>
			<div>
				<img src="./img/card02.png" class="w100h100">
			</div>
			<div>
				<img src="./img/card03.png" class="w100h100">
			</div>
		</div>
		<div class="container width100">
			<div class="container6 width1200 m0a height100">
				<div class="insipid item6 pos-re">
					<img src="img/taolun.png" class="pos-re m0a">
					<p class="study pos-re text-center">一起学习 一起成长</p>
					<a href="javascript:void(0)" class="pos-re insipid text-center m0a insipid">加入中国大学MOOC</a>
					<p class="study-sum pos-re text-center">已有1209.26万老师和同学在此发言讨论</p>
				</div>
				<div class="bgc-f item6">
					<div class="top w100 pos-re">
						<img src="./img/person_giao.jpg" class="pos-ab dis-b">
						<p class="name pos-ab">Giao哥</p>
						<span class="work pos-ab insipid">导师</span>
						<p class="major pos-ab ccc">来自 <span class="majorName black">未知行业</span></p>
					</div>
					<div class="cen pos-re">
						<p class="text-center pos-re">年轻人，醒醒吧！此时不搏何时搏？一 Giao 我里Giao！</p>
					</div>
					<div class="bot">
						<p class="text-center"><span class="succeed">714人</span>参加讨论</p>
					</div>
				</div>
				<div class="bgc-f item6">
					<div class="top w100 pos-re">
						<img src="./img/person_dailanzi.jpg" class="pos-ab">
						<p class="name pos-ab">带篮子</p>
						<span class="work pos-ab insipid">导师</span>
						<p class="major pos-ab ccc">来自 <span class="majorName black">移动资产风控</span></p>
					</div>
					<div class="cen pos-re">
						<p class="text-center pos-re">学而不思则罔，思而不学则殆！</p>
					</div>
					<div class="bot">
						<p class="text-center"><span class="succeed">545人</span>参加讨论</p>
					</div>
				</div>
			</div>
		</div>
		<div class="container width1200 m0a">
			<p class="big-title">
				计算机
			</p>
			<div class="container7 dis-f">
				<div class="item7-left bgc-f">
					<img src="./img/jisuanji.png">
					<ul>
						<li><span class="name">PIE模型</span><span class="time">7'55"</span></li>
						<li><span class="name">测试术语</span><span class="time">8'38"</span></li>
						<li><span class="name">Fault反思</span><span class="time">9'50"</span></li>
					</ul>
				</div>
				<div class="item7">
					<div class="item7-1 width100 first">
						<div class="img width100">
							<img src="./img/card/c01.png" class="w100h100">
						</div>
						<p class="title">DIY智慧小屋—带你玩转物联网</p>
						<p class="bot">
							<span>浙江大学</span>
							<span>
								<span class="glyphicon glyphicon-user"></span>
								23470
							</span>
						</p>
					</div>
					<div class="item7-1 width100 second">
						<div class="img width100">
							<img src="./img/card/c02.png" class="w100h100">
						</div>
						<p class="title">数据库系统（上）：模型与语言</p>
						<p class="bot">
							<span>哈尔滨工业大学</span>
							<span>
								<span class="glyphicon glyphicon-user"></span>
								26025
							</span>
						</p>
					</div>
				</div>
				<div class="item7">
					<div class="item7-1 width100 first">
						<div class="img width100">
							<img src="./img/card/c03.png" class="w100h100">
						</div>
						<p class="title">人工智能 ：模型与算法</p>
						<p class="bot">
							<span>浙江大学</span>
							<span>
								<span class="glyphicon glyphicon-user"></span>
								28122
							</span>
						</p>
					</div>
					<div class="item7-1 width100 second">
						<div class="img width100">
							<img src="./img/card/c04.png" class="w100h100">
						</div>
						<p class="title">计算机网络</p>
						<p class="bot">
							<span>哈尔滨工业大学</span>
							<span>
								<span class="glyphicon glyphicon-user"></span>
								60262
							</span>
						</p>
					</div>
				</div>
				<div class="item7">
					<div class="item7-1 width100 first">
						<div class="img width100">
							<img src="./img/card/c05.jpeg" class="w100h100">
						</div>
						<p class="title">大学计算机</p>
						<p class="bot">
							<span>北京理工大学</span>
							<span>
								<span class="glyphicon glyphicon-user"></span>
								144220
							</span>
						</p>
					</div>
					<div class="item7-1 width100 second">
						<div class="img width100">
							<img src="./img/card/c06.png" class="w100h100">
						</div>
						<p class="title">Java程序设计</p>
						<p class="bot">
							<span>江西财经大学</span>
							<span>
								<span class="glyphicon glyphicon-user"></span>
								16544
							</span>
						</p>
					</div>
				</div>
				<div class="item7">
					<div class="item7-1 width100 first">
						<div class="img width100">
							<img src="./img/card/c07.png" class="w100h100">
						</div>
						<p class="title">大学计算机——计算思维导论</p>
						<p class="bot">
							<span>哈尔滨工业大学</span>
							<span>
								<span class="glyphicon glyphicon-user"></span>
								23298
							</span>
						</p>
					</div>
					<div class="item7-1 width100 second">
						<div class="img width100">
							<img src="./img/card/c08.png" class="w100h100">
						</div>
						<p class="title">深度学习基础</p>
						<p class="bot">
							<span>哈尔滨工业大学</span>
							<span>
								<span class="glyphicon glyphicon-user"></span>
								11733
							</span>
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="container width100">
			<div class="container8 m0a width1200 height100">
				<div class="top">
					<p class="text-center insipid">即便错过心仪的大学，也不要错过中国大学MOOC!</p>
				</div>
				<div class="cen dis-f">
					<div class="insipid">
						<img src="./img/person_ruanyifeng.jpg" class="dis-b m0a">
						<p class="name text-center pos-re">阮一峰</p>
						<p class="school text-center pos-re">上海财经大学 世界经济博士研究生</p>
						<p class="describe text-center pos-re">
							主要研究宏观金融、货币政策与美国经济。于2008年6月获得博士学位。
							目前在上海一所当地大学（上海金融学院 国际经贸学院）任教。他本人也是一名IT技术人员，
							并且对自由软件有着坚定不移的信念。除了写博客以外，他还有三个网站：微趣、Italo Calvino in China和读书公园。
						</p>
					</div>
					<div class="insipid">
						<img src="./img/person_youyuxi.jpg" class="dis-b m0a">
						<p class="name text-center pos-re">尤雨溪</p>
						<p class="school text-center pos-re">Design & Technology 艺术硕士</p>
						<p class="describe text-center pos-re">
							尤雨溪是Vue.js框架的作者，HTML5版Clear的打造人。他认为，未来App的趋势是轻量化和细化，能解决问题的应用就是好应用。
							而在移动互联网时代大的背景下，个人开发者的机遇在门槛低，成本低，跨设备和多平台四个方面。
						</p>
					</div>
					<div class="insipid">
						<img src="./img/person_zhangzhidong.jpg" class="dis-b m0a">
						<p class="name text-center pos-re">张志东</p>
						<p class="school text-center pos-re">腾讯执行董事兼 首席技术官</p>
						<p class="describe text-center pos-re">
							张志东，广东东莞人，腾讯创办人之一，腾讯高级副总裁兼科技总裁，1993年取得深圳大学理学学士学位，
							1996年取得华南理工大学计算机应用及系统架构硕士学位，在电信及互联网行业拥有多年经验，
							1998年创立腾讯，全面负责腾讯公司专有技术的开发，包括即时通信平台和大型网上应用系统的开发。
						</p>
					</div>
				</div>
				<div class="bot">
					<a href="javascript:void(0)" class="m0a dis-b text-center">加入中国大学MOOC</a>
				</div>
			</div>
		</div>
		<div class="container width100">
			<div class="container9 width1200 m0a height100 dis-f">
				<div class="le">
					<img src="img/mooc-over.png">
					<p class="ccc">由高教社联手网易推出让每一个有提升愿望的用户能够学到中国知名高校的课程，并获得认证。</p>
				</div>
				<div class="ri dis-f">
					<div class="ri1">
						<p class="ccc">关于我们</p>
						<ul>
							<li><a href="">关于我们</a><a href="">学校云</a></li>
							<li><a href="">联系我们</a><a href="">常见问题</a></li>
							<li><a href="">意见反馈</a><a href="">法律条款</a></li>
						</ul>
					</div>
					<div class="ri2">
						<p class="ccc">关注我们</p>
						<span class="glyphicon glyphicon-globe insipid"></span>
						<span class="glyphicon glyphicon-send insipid"></span>
					</div>
					<div class="ri3">
						<p class="ccc">友情链接</p>
						<ul>
							<li><a href="">网易卡搭编程</a></li>
							<li><a href="">网易云课堂</a></li>
							<li><a href="">网易100分</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="lession pos-ab dis-n bgc-f">
			<p class="bigtitle c9">中国大学MOOC，为你提供一流的大学教育</p>
			<div class="bigschool">
				<p class="smalltitle">大学</p>
				<div class="bigschool-container">
					<p class="dis-f">
						<span>国家精品</span>
						<span>计算机</span>
						<span>外语</span>
						<span>理学</span>
						<span>工学</span>
					</p>
					<p class="dis-f">
						<span>经济管理</span>
						<span>心理学</span>
						<span>文史哲</span>
						<span>艺术设计</span>
						<span>医药卫生</span>
					</p>
					<p class="dis-f">
						<span>教育教学</span>
						<span>法学</span>
						<span>农林园艺</span>
						<span>体育运动</span>
						<span>音乐与舞蹈</span>
					</p>
				</div>
			</div>
			<div class="update">
				<p class="smalltitle">升学/择业</p>
				<div class="bigschool-container">
					<p class="dis-f">
						<span>考证就业</span>
						<span>21考研</span>
						<span>22考研</span>
						<span>四六级雅思</span>
						<span>实用英语</span>
					</p>
				</div>
			</div>
			<div class="other"></div>
		</div>
		<div class="login w100h100">
			<div class="window bgc-f pos-ab">
				<span class="glyphicon glyphicon-remove pos-ab" id="removeWindowSpan"></span>
				<div class="top">
					<div class="ite itemActive"  onclick="loginActive(0)">邮箱登录</div>
					<div class="ite" onclick="loginActive(1)">手机号登录</div>
					<div class="ite" onclick="loginActive(2)">注册</div>
				</div>
				<div class="center m0a">
					<div class="item">
						<span class="glyphicon glyphicon-user tc ccc"></span>
						<input type="text" id="login-email" placeholder="网易邮箱"/>
					</div>
					<div class="item">
						<span class="glyphicon glyphicon-console tc ccc"></span>
						<input type="password" id="login-password" placeholder="密码" />
					</div>
					<p id="login-msg" class="font-12">使用<a>网易账号管家</a>，全面保护您的账号</p>
					<button class="btn1 insipid dis-b" id="login-btn">登录</button>
					<p id="login-bot-msg" class="font-12 mt10">
						<span>
							<a href="javascript:void(0)"><input type="checkbox"/>十天内免登录</a>
							|
							<a href="javascript:void(0)">忘记密码</a>
						</span>
						<span>
							<a href="javascript:void(0)" id="regsiterA">去注册</a>
						</span>
					</p>
				</div>
				<div class="center m0a dis-n">
					<div class="item">
						<span class="glyphicon glyphicon-user tc ccc"></span>
						<input type="text" id="login-phone" placeholder="请输入手机号"/>
					</div>
					<div class="item">
						<span class="glyphicon glyphicon-console tc ccc"></span>
						<input type="password" id="login-phone-password" placeholder="请输入密码" />
					</div>
					<p id="login-phone-msg" class="font-12">使用<a>网易账号管家</a>，全面保护您的账号</p>
					<button class="btn1 insipid dis-b" id="login-phone-btn">登录</button>
					<p id="login-bot-msg" class="font-12 mt10">
						<span>
							<a href="javascript:void(0)"><input type="checkbox" id="" />十天内免登录</a>
							|
							<a href="javascript:void(0)">忘记密码</a>
						</span>
						<span>
							<a href="javaScript:void(0)" id="regsiterA">去注册</a>
						</span>
					</p>
				</div>
				<div class="center m0a dis-n">
					<div class="item">
						<span class="glyphicon glyphicon-user tc ccc"></span>
						<input type="text" id="register-email" placeholder="请输入邮箱地址"/>
					</div>
					<div class="item">
						<span class="glyphicon glyphicon-console tc ccc"></span>
						<input type="password" id="register-password" placeholder="请设置6-20位密码" />
					</div>
					<div class="item item-verify">
						<input type="text" id="register-verify" placeholder="请输入4位验证码" />
						<button id="register-getVerify" class="bgc-f succeed">获取验证码</button>
					</div>
					<p id="register-msg" class="font-12">使用<a>网易账号管家</a>，全面保护您的账号</p>
					<button id="register-btn" class="btn1 insipid dis-b">注册并登录</button>
				</div>
				<div class="bottom bgc-f3 pos-ab width100">
					<p>
						<span class="glyphicon glyphicon-console"></span>
						<span class="glyphicon glyphicon-alert"></span>
						<span class="glyphicon glyphicon-send"></span>
						<span class="glyphicon glyphicon-duplicate"></span>
					</p>
				</div>
			</div>
		</div>
    </div>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>